<template>
	<view class="container">
		<!-- 背景 -->
		<view class="bg"></view>
		<!-- 房源基本信息 -->
		<view class="house_name">{{housename}}</view>
		<!-- 收起 -->
		<view class="godown" @click="back">
			<image src="../../static/assets/godown.png" mode=""></image>
		</view>
		<!-- 内容框 -->
		<view class="communicate_box">
			<block v-for="item in msglist">
				<view class="item" v-bind:class="{'item_left':item.isanswer==true,'item_right':item.isask==true}">{{item.content}}</view>
			</block>
		</view>
		<!-- 发送框 -->
		<view class="send_box">
			<view class="iptbox">
				<!-- <textarea value="" placeholder="请输入想要咨询的内容" v-model="getipt" @keydown.enter="askSomething()"/> -->
				<input value="" placeholder="请输入想要咨询的内容" v-model="getipt" @keydown.enter="askSomething()"/>
			</view>
			<view class="send" @click="askSomething()">发送</view>
			<image src="../../static/assets/call.png" mode="" class="call" @click="showphone"></image>
		</view>
	</view>
</template>

<script>
	import {houseDetail} from "../../data/housedetail.js"
	import store from "../../store/index.js"//引入store
	export default {
		data() {
			return {
				housename:'',//房源名字
				houseid:'',//房源id
				houseDetailObj:{},//房源的部分详情
				getipt:'',
				msglist:[
					{content:'您好请问有什么需要咨询的吗',isanswer:true,isask:false},
					{content:'您好',isanswer:false,isask:true},
					],
				allMsg:[]//记录所有房源的聊天记录
			};
		},
		methods:{
			// 点击返回
			back(){
				uni.navigateBack()
			},
			// 获取房源信息
			// 自动回复的数据
			getHouseInfo(){
				// console.log(store.state.houseobj);
				let houseobj=store.state.houseobj;
				let obj={};
				// 具体位置
				obj.address=houseobj.address;
				// 租金方式 pay_info里的payDetail 
				obj.rentway=[houseobj.rent,houseobj.payway,houseobj.totalrent]
				// 电话 
				obj.hotline=houseobj.hotline;
				// 什么时候可以看房 lease_inception
				obj.inception=houseobj.suitabaltime;
				this.houseDetailObj=obj;
				// console.log(this.houseDetailObj)
			},
			// 发出问题
			askSomething(){
				let iptval=this.getipt;
				if(iptval.length==0){
					uni.showToast({
						icon:"error",
						title:"请输入内容"
					})
					return;
				}
				else{
					let obj={};
					obj.content=iptval;
					obj.isask=true;
					obj.isanswer=false;
					// 将问题加进数组末尾
					this.msglist.push(obj);
					this.getipt='';//清空输入文本框的值
					// 定义询问问题的类型
					let a=['租金','费用','钱'];
					let b=['时间','时候'];
					let c=['位置','地址','地点','在哪里'];
					let d=['电话','联系','手机'];
					// 创建回复
					let answerobj={};
					answerobj.content='';
					answerobj.isask=false;
					answerobj.isanswer=true;
					// 判断问的是哪类问题 做自动回答
					let askinfo=obj.content;
					a.forEach((item)=>{
						if(askinfo.indexOf(item)>-1){
							// console.log('zujin');
							answerobj.content='该房源支持的租金方式为'+this.houseDetailObj.rentway;
						}
					})
					b.forEach((item)=>{
						if(askinfo.indexOf(item)>-1){
							// console.log('shijian');
							answerobj.content='支持的看房时间为'+this.houseDetailObj.inception+',诚心欢迎您的光临哦';
						}
					})
					c.forEach((item)=>{
						if(askinfo.indexOf(item)>-1){
							// console.log('weizhi');
							answerobj.content='该房源的地址为'+this.houseDetailObj.address+',交通便利是不错的选择哦';
						}
					})
					d.forEach((item)=>{
						if(askinfo.indexOf(item)>-1){
							// console.log('dianhua');
							answerobj.content='有任何问题可以打这个电话'+this.houseDetailObj.hotline+',很高心为您解答';
						}
					})
					if(answerobj.content.length==0){
						answerobj.content='房东暂时走开啦，智能客服持续为您解答，或者回复[手机]直接和房东联系哦'
					}
					// a.forEach((item)=>{
					// 	if(askinfo.indexOf(item)>-1){
					// 		console.log('zujin');
					// 		answerobj.content='该房源支持的租金方式为'+this.houseDetailObj.rentway;
					// 	}
					// 	else{
					// 		b.forEach((item)=>{
					// 			if(askinfo.indexOf(item)==0){
					// 				console.log('shijian');
					// 				answerobj.content='支持的看房时间为'+this.houseDetailObj.inception+',诚心欢迎您的光临哦';
					// 				// return
					// 			}
					// 			else{
					// 				c.forEach((item)=>{
					// 					if(askinfo.indexOf(item)==0){
					// 						console.log('weizhi');
					// 						answerobj.content='该房源的地址为'+this.houseDetailObj.address+',交通便利是不错的选择哦';
					// 						// return
					// 					}
					// 					else{
					// 						d.forEach((item)=>{
					// 							if(askinfo.indexOf(item)==0){
					// 								console.log('dianhua');
					// 								answerobj.content='有任何问题可以打这个电话'+this.houseDetailObj.hotline+',很高心为您解答';
					// 								// return
					// 							}
					// 							else{
					// 								// return
					// 								answerobj.content='房东暂时走开啦，智能客服持续为您解答，或者回复[手机]直接和房东联系哦'
					// 							}
					// 						})
					// 					}
					// 				})
					// 			}
					// 		})
					// 		// answerobj.content='房东暂时走开啦，智能客服持续为您解答，或者回复[手机]直接和房东联系哦'
					// 	}
					// })
					// 添加到自动回复问题列表
					// console.log(answerobj);
					this.msglist.push(answerobj);
					this.setHistory()
				}
			},
			// 保存聊天记录的方法
			setHistory(){
				// 将聊天记录存放本地
				let storageObj={};
				storageObj.id=this.houseid;
				storageObj.msgarr=this.msglist;
				// console.log(storageObj);
				// console.log('保存前的所有记录',this.allMsg);
				let temp=-1;
				if(this.allMsg.length==0){//无数据
					// nothing
					this.allMsg.push(storageObj)
				}
				else{
					this.allMsg.forEach((item,index)=>{//有数据
						if(item.id==storageObj.id){
							temp=index;//表示重复 需要删除
						}
					})
					if(temp!=-1){//表示temp下标值被重新赋值过
						this.allMsg.splice(temp,1);
					}
					this.allMsg.push(storageObj)//存放该房源聊天记录的数组 不能重复添加进数组 判断是否同一个id
				}
				// console.log('保存后的所有记录',this.allMsg)
				uni.setStorage({
					key:"set_allmsg",
					data:this.allMsg,
					success:function(){
						// console.log('success');
					}
				})
			},
			// 点击显示电话
			showphone(){
				uni.showToast({
					title:"拨打热线电话"+this.houseDetailObj.hotline+",我们帮助您和房东一对一沟通哦",
					icon:"none",
					duration:2000
				})
			}
			
		},
		onLoad(option){
			// console.log(option)
			this.housename=option.subname;
			this.houseid=option.id;
			this.getHouseInfo();
			// console.log(this.houseDetailObj)
			let ask='什么时候';
			// let ask='时间是';
			// let target='时间';
			let target=['时间','时候'];
			target.forEach((item)=>{
			if(ask.indexOf(item)>-1){
				console.log('ok')
			}
		})
			// console.log(target.indexOf(ask))//-1
			// console.log(ask.indexOf(target))//0
			uni.getStorage({
				key:"set_allmsg",
				success:(res)=>{
						let getdata=res.data;
						// console.log(res.data)
						let temp=-1;
						// 当有历史记录的时候
						if(res.data.length!==0){
							getdata.forEach((item,index)=>{
								if(option.id==item.id){
									temp=index;
								}
							})
						if(temp!=-1){
							this.msglist=res.data[temp].msgarr;
						}
						this.allMsg=res.data;
						// console.log(this.msglist)
					}
				}
			})
			uni.getSystemInfo({
				success:(res) =>{
					// console.log(res); //获取系统信息
					let info=uni.createSelectorQuery().select('.communicate_box');//选择某个盒子
					info.boundingClientRect(function(data){
						// console.log(data)//获取自身的元素				
					});
					
				}
			})
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	height: 100%;
	// padding-top: 5%;
	// 背景
	.bg{
		width:100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../../static/assets/bg.jpg);
		background-position:center center; 
		background-size: cover;
		opacity: 0.2;
		z-index: -1;
	}
	.house_name{
		width: 100%;
		text-align: center;
		height: 180rpx;
		line-height: 180rpx;
		font-size: 20px;
		color: #FFFFFF;
		background-color: #585eaa;
		position: fixed;
		top: 0;
		left: 0;
	}
	.godown{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		top: 4%;
		left: 5%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	// 聊天框
	.communicate_box{
		width: 100%;
		height:920rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		// margin-top:200rpx ;
		position: fixed;
		top: 200rpx;
		left: 0;
		overflow-y: scroll;
		display: flex;
		flex-direction: column;
		// align-items: center;
		.item{
			max-width: 60%;
			// line-height: 16px;
			padding: 20rpx 24rpx;
			background-color: #C8C7CC;
			color: #555555;
			margin:20rpx 0;
			border-radius: 10rpx;
			// position: relative;
			// !!!!!!文本超出盒子固定长度需要自动换行
			word-wrap: break-word;
			word-break: break-all;
		}
		// 左边回复框
		.item_left{
			// align-items: left;
			// margin: 50rpx;
			max-width: 60%;
			margin-left: 40rpx;
			margin-right: auto;
			position: relative;
			// .sanjiao1{
			// 	content:'';
			// 	width: 0;
			// 	height: 0;
			// 	border: 20rpx solid transparent;
			// 	border-right-color:#C8C7CC ;
			// 	position: absolute;
			// 	left: -38rpx;
			// 	top: 30%;
			// }
			&::after{
				content:'';
				width: 0;
				height: 0;
				border: 20rpx solid transparent;
				border-right-color:#C8C7CC ;
				position: absolute;
				left: -38rpx;
				top: 30%;
			}
		}
		// 右边提问框
		.item_right{
			// align-items: right;
			display:flex;
			align-self:flex-end;
			margin-right: 40rpx;
			// margin-left: auto;
			position: relative;
			&::after{
				content: '';
				width: 0;
				height: 0;
				border: 20rpx solid transparent;
				border-left-color: #C8C7CC;
				position: absolute;
				top: 30%;
				right:-36rpx ;
			}
		}
		
	}
	// 发送消息框
	.send_box{
		width: 100%;
		// height: 180rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #585eaa;
		display: flex;
		align-items: center;
		.iptbox{
			width: 70%;
			// height: 80rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			margin-left: 20rpx;
			margin: 40rpx 0;
			margin-left: 10rpx;
			input{
				width: 90%;
				min-height: 80rpx;
				padding: 2% 5%;
				word-wrap: break-word;
				word-break: break-all;
			}
		}
		.send{
			width: 10%;
			padding: 10rpx 8px;
			font-size: 18px;
			color: #FFFFFF;
			margin: 40rpx 0;
		}
		.call{
			width: 80rpx;
			height: 80rpx;
			padding: 10rpx 5px;
			margin: 40rpx 0;
		}
	}
}
</style>
